<template>
	<view>

		<view class="navBar" :style="`padding-top: ${statusBarHeight}px;`"> </view>
		<view class="container">
			<rich-text class="ql-editor" :nodes="content"></rich-text>
		</view>
		<view class="bottom">
			<image src="@/static/arrow-left.png" class="back" @click="back"></image>
			<view class="mask" v-if="counter">
				还需阅读{{counter}}秒
			</view>
			<view class="sign" @click="sign">
				<text v-if="signValue">重新签名</text>
				<text v-else>点击签名</text>
			</view>
		</view>
		<view class="seat">

		</view>
		<sign ref="signRef" :type="type"></sign>
	</view>
</template>

<script>
	import sign from "@/components/htz-signature.vue"
	export default {
		components: {
			sign
		},
		data() {
			return {
				type:'',
				title:'',
				content: '',
				statusBarHeight: uni.getStorageSync("statusBarHeight"),
				counter: 5,
				timer: null,
				signValue:''
			}
		},
		onLoad(option) {
			if(option.type) this.type = option.type
			if(localStorage.getItem('sign-'+this.type))
			{
				this.signValue = localStorage.getItem('sign-'+this.type)
				this.counter = 0
			}else{
				let timer = setInterval(() => {
					this.counter--;
				}, 1000);
				setTimeout(() => {
					clearInterval(timer)
				}, 5000)
			}
			
			this.getContent()
		},
		methods: {
			back() {
						uni.navigateBack()
					},
			getContent() {
				this.$post("/common/agreement_data").then(res => {
					let data = res.data
					data.forEach(item=>{
						if(item.type === this.type)
						{
							this.title = item.name
							this.content = item.content
						}
					})
				})
			},
			sign() {
				this.$refs.signRef.open()
			},
			close(){
				this.$refs.signRef.close()
			}
		}
	}
</script>

<style lang="scss">
.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #4095E5;
		text-align: center;
		padding: 70rpx 0;
	}

	.content {
		font-size: 32rpx;
		color: $assist-color2;
	}

	.seat {
		height: 250rpx;
	}

	.bottom {
		height: 250rpx;
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0%;
		left: 0;

		.back {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 50rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
		}

		.mask {
			position: absolute;
			font-size: 36rpx;
			text-shadow: 0px 2px 6px rgba(162, 239, 77, 1);
			font-family: "宋体";
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba($color: #fff, $alpha: 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;
		}

		.sign {
			position: absolute;
			right: 40rpx;
			color: $assist-color2;
			font-size: 32rpx;
			width: 300rpx;
			text-align: center;
			border-bottom: 2rpx solid #bbb;
			top: 50%;
			transform: translateY(-50%);

			text {
				line-height: 100rpx;
			}
		}
	}
</style>